<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- include mixitup for filtering items -->
<script src="js/jquery.mixitup.min.js"></script>
<div id="content" role="main">
	<!-- Heading ______________________________________-->
	<h1>Portfolio</h1>

	<!-- Breadcrumbs ______________________________________-->
	<!-- No breadcrumbs in the portfolio section, just the portfolio category filter ______________________________________-->

	<!-- Portfolio category filter ______________________________________-->
	<ul id="menu-portfolio-items" class="tags">
		<li><a href="javascript:void(0)" data-filter="all" class="active">All</a></li>
		<li><a href="javascript:void(0)" data-filter="crane">crane</a></li>
		<li><a href="javascript:void(0)" data-filter="elevatorPart">elevatorPart</a></li>
		<li><a href="javascript:void(0)" data-filter="cranePart">cranePart</a></li>
		<li><a href="javascript:void(0)" data-filter="brandDore">brandDore</a></li>
		<li><a href="javascript:void(0)" data-filter="soundproof">soundproof</a></li>
		<li><a href="javascript:void(0)" data-filter="excavator">excavator</a></li>
		<li><a href="javascript:void(0)" data-filter="constructionMachinery">constructionMachinery</a></li>
		<li><a href="javascript:void(0)" data-filter="architectural">architectural</a></li>
		<li><a href="javascript:void(0)" data-filter="eco">eco</a></li> 
	</ul> 

	<hr />
	<div class="gallery">
		<c:forEach var="image" items="${list}" varStatus="index">
		<div class="gallery-row">   
			<dl class="gallery-item col-4 crane cat-4 cat-2">    
				<dt class="gallery-icon">
					<a	href="imgs/portfolio/vladstudio_raring_ringtail_blue_480x320.jpg">
						<img src="${path}${image}" width="240" height="160">
					</a>
				</dt>
				<dd class="gallery-caption"> 
					<strong>${image} </strong> 
					<span class="small">Vector,	Concept Art</span>
				</dd>
			</dl> 
			</div> 
		</c:forEach>
	</div> 
	<hr />  	
	<!-- .gallery -->

</div>
<!-- END #content -->
<!-- Initializing scripts ______________________________________-->
	<script> 			
	jQuery(window).load(function() {
		$('.gallery').mixitup({
			targetSelector: '.gallery-item',
			filterSelector: '#menu-portfolio-items li a'
		});
	});
	</script> 